<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<!--<link rel="stylesheet" href="https://act.weixin.qq.com/static/cdn/css/wepayui/0.1.1/wepayui.min.css">-->
<link rel="stylesheet" href="/css/pay.css">
<link rel="stylesheet" href="/css/keyboard.css">
<title>懒人手礼无人货架</title>
</head>
<!--
	通用说明：
	1.模块的隐藏添加class:hide;
	2.body标签默认绑定ontouchstart事件，激活所有按钮的:active效果
-->
<body ontouchstart class="weui-wepay-pay-wrap">
<div class="pay-top">
	<div class="pay-shop-info">
		<div class="content">
			<span class="shop-name">懒人手礼无人货架</span>
		</div>
	</div>
	<div class="pay-input-money">
		<div class="input-left">
			<span>输入消费金额</span>
		</div>
		<div class="input-right">
			<span>￥</span>
			<label id="paymoney" type="text"></label>
		</div>
	</div>
	<div class="upper-case">
		<span class="upper-case-content"></span>
	</div>
</div>
<div class="payinfo">
	<table cellspacing="0" cellpadding="0">
		<tr>
			<td class="paynum">1</td>
			<td class="paynum">2</td>
			<td class="paynum">3</td>
			<td id="pay-return">
				<div class="keybord-return"></div>
			</td>
		</tr>
		<tr>
			<td class="paynum">4</td>
			<td class="paynum">5</td>
			<td class="paynum">6</td>
			<td rowspan="3" class="pay">
				<a href="javascript:return false;">
					<div class="a-pay">
						<p>确认</p>
						<p>支付</p>
					</div>
				</a>
			</td>
		</tr>
		<tr>
			<td class="paynum">7</td>
			<td class="paynum">8</td>
			<td class="paynum">9</td>
		</tr>
		<tr>
			<td id="pay-zero" colspan="2" class="payzero">0</td>
			<td id="pay-float">.</td>
		</tr>
	</table>
</div>
</body>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="/lib/jquery-2.1.4.js"></script>
<script src="/lib/fastclick.js"></script>
<script>
$(function() {
    FastClick.attach(document.body);
});
</script>
<script type="text/javascript">
    var openid = "<%= docs.openid %>";
    var mid = "<%= docs.mid %>";
    var jssdk = <%- JSON.stringify(docs.jssdk) %>;
    jssdk.jsApiList = ["chooseWXPay"];
    // jssdk.debug = true;
    // wx.error(function(err){
        // alert(JSON.stringify(err));
    // });
    wx.config(jssdk);
    $(".payinfo").slideDown();
    var $paymoney = $("#paymoney");
    $(".paynum").each(function(){
        $(this).click(function(){
            if(($paymoney.text()).indexOf(".") != -1 && ($paymoney.text()).substring(($paymoney.text()).indexOf(".") + 1, ($paymoney.text()).length).length == 2){
                return;
            }
            if($.trim($paymoney.text()) == "0"){
                return;
            }
            if (parseInt($paymoney.text()) > 10000 && $paymoney.text().indexOf(".") == -1) {
                return;
            }
            $('.pay').removeClass('pay-disabled').find('a').attr('href','javascript:pay();');
            $paymoney.text($paymoney.text() + $(this).text());
            upperCaseMoney.text(digitUppercase($paymoney.text()));
        });
    });

    $("#pay-return").click(function(){
        $paymoney.text(($paymoney.text()).substring(0, ($paymoney.text()).length - 1));
        // upperCaseMoney.text(digitUppercase($paymoney.text()));
        if (!$paymoney.text()) {
            // upperCaseMoney.text('');
            $('.pay').addClass('pay-disabled').find('a').attr('href', 'javascript:return false;');
        }
    });

    $("#pay-zero").click(function(){
        if(($paymoney.text()).indexOf(".") != -1 && ($paymoney.text()).substring(($paymoney.text()).indexOf(".") + 1, ($paymoney.text()).length).length == 2){
            return;
        }
        if($.trim($paymoney.text()) == "0"){
            return;
        }
        if (parseInt($paymoney.text()) > 10000 && $paymoney.text().indexOf(".") == -1) {
            return;
        }
        $paymoney.text($paymoney.text() + $(this).text());
    });

    $("#pay-float").click(function(){
        if($.trim($paymoney.text()) == ""){
            return;
        }

        if(($paymoney.text()).indexOf(".") != -1){
            return;
        }

        if(($paymoney.text()).indexOf(".") != -1){
            return;
        }

        $paymoney.text($paymoney.text() + $(this).text());
    });
    if (!$paymoney.text()) {
        $('.pay').addClass('pay-disabled');
    }
    // wx.ready(function(){

    // });

    var pay = function(){
        $.ajax({
            type: "post",
            dataType: "json",
            data: {
                mid : mid,
                openid : openid,
                money : $paymoney.text(),
                timestamp : jssdk.timestamp
            },
            url: "/pay",
            success: function(data){
                if(data.code)
                    return alert(data.msg);

                var params = data.docs;
                var oid = params.oid;
                var pay = params.pay;
                params.pay.success = function(res){
                    $("#paymoney").html("");
                    $('.pay').addClass('pay-disabled').find('a').attr('href', 'javascript:return false;');
                    var form = $("<form style='display: none;' action='open/order' method='post'><input name='oid' value='"+oid+"' /></form>").appendTo("body");
                    form.submit();
                };
                wx.chooseWXPay(pay);
            }
        });
    };
</script>
<!--自适应布局-->
<script>
	(function () {
		var designW = 750;  //设计稿宽
		var font_rate = 100;
		//适配
		document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
		document.getElementsByTagName("body")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";

		//监测窗口大小变化
		window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () {
			document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
			document.getElementsByTagName("body")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
		}, false);
	})();
</script>
<!--金额转大写-->
</html>
